<template>
  <view class="item-container" :style="{ marginBottom }">
    <view class="item-info" @click.stop="itemClick">
      <view class="item-info_img">
        <TImage :src="img" width="212rpx" height="170rpx" border-radius="10rpx" />
      </view>
      <view class="item-info_text">
        <view class="item-title text-overflow-2">
          <text>{{ title }}</text>
        </view>
        <slot name="midText" />
        <view v-if="times?.length" class="info-time">
          <template v-for="(v, i) in times" :key="i">
            <view>
              <text style="margin-right: 12rpx;">{{ v.label }}</text>
              <text>{{ v.value }}</text>
            </view>
          </template>
        </view>
      </view>
    </view>
    <view v-if="showItemBottom" class="item-bottom">
      <slot name="itemBottom" />
    </view>
  </view>
</template>

<script setup lang="ts">
  import TImage from '@/components/TImage/index.vue';
  import { propTypes } from '@/utils/propTypes';
  import { PropType } from 'vue';

  defineProps({
    title: propTypes.string,
    img: propTypes.string,
    times: Array as PropType<{ label: string; value: string }[]>,
    showItemBottom: propTypes.bool.def(false),
    marginBottom: propTypes.string.def('30rpx'),
  });

  const emit = defineEmits(['click']);

  function itemClick() {
    emit('click');
  }
</script>

<style lang="scss" scoped>
  .item-container {
    background-color: #fff;
    padding: 30rpx;
    padding-bottom: 0;

    .item-info {
      display: flex;
      align-items: center;
      height: 170rpx;
      padding-bottom: 40rpx;

      &_img {
        width: 212rpx;
        flex-shrink: 0;
        margin-right: 30rpx;
      }

      &_text {
        flex: 1;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .item-title {
          font-weight: bolder;
          color: #333;
          font-size: 28rpx;
          flex-shrink: 0;
        }

        .info-time {
          font-size: 24rpx;
          color: #aaabab;
        }
      }
    }

    .item-bottom {
      border-top: 1px solid #dddddd;
      min-height: 88rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }
</style>
